<template>
  <LayoutContent>
    <div class="echart">
      <div class="box" v-if="!isStu && !isTea">
        <div class="detail">班级人数分析</div>
        <BasicEchart :option="classNumberOption" :carouselNum="classNumberOption.xAxis.data.length" />
      </div>
      <div class="box" v-if="!isStu && !isTea">
        <div class="detail">专业人数分析</div>
        <BasicEchart :option="personNumberOption" :carouselNum="personNumberOption.series[0].data.length" />
      </div>
      <div class="box" v-if="!isStu && !isTea">
        <div class="detail">男女比列分析</div>
        <BasicEchart :option="menWomenNumberOption" :carouselNum="menWomenNumberOption.series[0].data.length" />
      </div>
      <div class="box" v-if="!isStu && !isTea">
        <div class="detail">班级成绩分析</div>
        <BasicEchart :option="classScoreOption" :carouselNum="classScoreOption.series[0].data.length" />
      </div>
      <div class="box2" v-if="isStu">
        <div class="max_box">
          <div class="detail">成绩分析</div>
          <el-select v-model="name" placeholder="请选择考试名称" style="width: 200px" @change="changeHandle">
            <el-option v-for="(item, index) in NameList" :label="item" :value="item" />
          </el-select>
        </div>
        <BasicEchart :option="scoreOptionStu" />
      </div>
      <div class="box2" v-if="isTea">
        <div class="max_box">
          <div class="detail">成绩分析</div>
          <el-select v-model="name" placeholder="请选择考试名称" style="width: 200px" @change="changeHandle">
            <el-option v-for="(item, index) in NameList" :label="item" :value="item" />
          </el-select>
        </div>
        <BasicEchart :option="scoreOptionTea" />
      </div>
    </div>
  </LayoutContent>
</template>

<script setup>
import { inject, onMounted, ref } from 'vue'
import { getClassApi, getMajorPersonApi, getMenWomenApi, getGradeApi, getNameApi } from '@/api/echart/index'
import { ElMessage } from 'element-plus'
const isStu = inject('isStu')
const isTea = inject('isTea')

// 获取班级数据
const classNumberOption = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      saveAsImage: { show: true },
    },
  },
  grid: {
    top: '5%',
    left: '3%',
    right: '4%',
    bottom: '15%',
    containLabel: true,
  },

  xAxis: {
    type: 'category',
    data: [],
    axisLabel: {
      show: true,
    },
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '班级人数',
      data: [],
      type: 'bar',
    },
  ],
})
const getClass = async () => {
  const res = await getClassApi()
  if (res.code != 200) return ElMessage.error(res.msg)
  classNumberOption.value.xAxis.data = Object.keys(res.data)
  classNumberOption.value.series[0].data = Object.values(res.data)
}

// 获取专业人数
const personNumberOption = ref({
  tooltip: {
    trigger: 'item',
  },
  toolbox: {
    feature: {
      saveAsImage: { show: true },
    },
  },
  legend: {
    left: 'left',
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
})
const getMajorPerson = async () => {
  const res = await getMajorPersonApi()
  if (res.code != 200) return ElMessage.error(res.msg)
  personNumberOption.value.series[0].data = res.data.map((item) => {
    return { value: item.total, name: item.name }
  })
}
// 获取男女比列
const menWomenNumberOption = ref({
  tooltip: {
    trigger: 'item',
  },
  legend: {
    left: 'left',
  },
  toolbox: {
    feature: {
      saveAsImage: { show: true },
    },
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
      itemStyle: {
        color: function (colors) {
          var colorList = ['#f9c956', '#75bedc']
          return colorList[colors.dataIndex]
        },
      },
    },
  ],
})
const getMenWomen = async () => {
  const res = await getMenWomenApi()
  if (res.code != 200) return ElMessage.error(res.msg)
  menWomenNumberOption.value.series[0].data = res.data.map((item) => {
    return { value: item.total, name: item.gender == 1 ? '男' : '女' }
  })
}

// 获取班级成绩分析
const classScoreOption = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999',
      },
    },
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      saveAsImage: { show: true },
    },
  },
  legend: {
    data: ['及格人数', '不及格人数', '及格率'],
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow',
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      name: '班级总人数',
      max: 45,
      min: 0,
    },
    {
      type: 'value',
      min: 0,
    },
    {
      type: 'value',
      min: 0,
    },
  ],
  series: [
    {
      name: '及格人数',
      type: 'bar',
      tooltip: {},
      data: [],
    },
    {
      name: '不及格人数',
      type: 'bar',
      tooltip: {},
      data: [],
    },
    {
      name: '及格率',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value.toFixed(2) + ' %'
        },
      },
      data: [],
    },
  ],
})
const getGrade = async () => {
  const res = await getGradeApi()
  if (res.code != 200) return ElMessage.error(res.msg)
  classScoreOption.value.xAxis[0].data = res.data.map((item) => item.name)
  classScoreOption.value.series[0].data = res.data.map((item) => item['及格'])
  classScoreOption.value.series[1].data = res.data.map((item) => item['不及格'])
  classScoreOption.value.series[2].data = res.data.map((item) => (item['及格'] / item.total) * 100)
  classScoreOption.value.yAxis[0].max = res.data.reduce((acc, cur) => {
    const currentTotal = parseInt(cur.total, 10)
    const accumulatorTotal = parseInt(acc.total, 10)
    return currentTotal > accumulatorTotal ? cur : acc
  }, 0).total
}

// 成绩分析stu
const name = ref('')
const NameList = ref([])
const getName = async () => {
  const res = await getNameApi()
  if (res.code != 200) return ElMessage.error(res.msg)
  NameList.value = res.data
  NameList.value.push('全部')
}
const changeHandle = () => {
  if (isStu.value) {
    getGradeByStu()
  }
  if (isTea.value) {
    getGradeByTea()
  }
}
const scoreOptionStu = ref({
  tooltip: {
    trigger: 'axis',
    formatter: (parmas) => {
      return `考试名称：${parmas[0].data.name}<br/>
      状态：${parmas[0].data.status}  <br/>满分：${parmas[0].data.max}
      <br/>分数：${parmas[0].data.value}`
    },
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow',
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      name: '分数',
    },
  ],
  series: [
    {
      name: '分数',
      type: 'bar',
      data: [],
    },
  ],
})
const getGradeByStu = async () => {
  const res = await getGradeApi({ name: name.value == '全部' ? '' : name.value })
  if (res.code != 200) return ElMessage.error(res.msg)
  scoreOptionStu.value.xAxis[0].data = res.data.map((item) => item.courseName)
  scoreOptionStu.value.series[0].data = res.data.map((item) => {
    return {
      name: item.name,
      max: item.max,
      courseName: item.courseName,
      studentName: item.studentName,
      status: item.score >= item.max ? '及格' : '不及格',
      value: item.score,
    }
  })
}

// 成绩分析 Tea
const scoreOptionTea = ref({
  tooltip: {
    trigger: 'axis',
    formatter: (parmas) => {
      return `考试名称：${parmas[0].data.name}<br/>姓名：${parmas[0].data.studentName}<br/>
      状态：${parmas[0].data.status}  <br/>满分：${parmas[0].data.max}
      <br/>分数：${parmas[0].data.value}`
    },
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow',
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      name: '分数',
    },
  ],
  series: [
    {
      name: '分数',
      type: 'bar',
      data: [],
    },
  ],
})
const getGradeByTea = async () => {
  const res = await getGradeApi({ name: name.value == '全部' ? '' : name.value })
  if (res.code != 200) return ElMessage.error(res.msg)
  scoreOptionTea.value.xAxis[0].data = res.data.map((item) => item.courseName)
  scoreOptionTea.value.series[0].data = res.data.map((item) => {
    return {
      name: item.name,
      max: item.max,
      courseName: item.courseName,
      studentName: item.studentName,
      status: item.score >= item.max ? '及格' : '不及格',
      value: item.score,
    }
  })
}

onMounted(() => {
  if (!isStu.value && !isTea.value) {
    getClass()
    getMajorPerson()
    getMenWomen()
    getGrade()
  }
  if (isStu.value || isTea.value) {
    getName()
  }
  if (isStu.value) {
    getGradeByStu()
  }
  if (isTea.value) {
    getGradeByTea()
  }
})
</script>

<style scoped lang="scss">
:deep(.el-card__body) {
  width: 100%;
  height: 100%;
}
.echart {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  .box2 {
    width: 100%;
    height: 100%;
    .max_box {
      display: flex;
      justify-content: space-between;
    }
  }
  .box {
    padding: 5px;
    border: 2px solid #eee;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #eee;
    width: 49%;
    height: 48%;
  }
}
</style>
